<template>
    <view :style="{'height':windowHeight, 'width':windowWidth, 'background-color':'#F1F1F1'}">
        <view>

            <uni-row>
                <uni-col :span="20">
                    <view><uni-search-bar :radius="100" @confirm="search" v-model="searchWord" placeholder="台站名称" @input="searchCheckRecords"></uni-search-bar></view>
                </uni-col>
                <uni-col :span="3"><view></view></uni-col>
                <uni-col :span="1">
                    <view style="margin-top: 0.5rem; margin-left: 0.5rem; ">
                        <uni-icons type="plusempty" size="30" @click="navigateToAddCheckRecord(stationCode)" ></uni-icons>
                    </view>
                </uni-col>
            </uni-row>
            <view>
                <scroll-view>
                    <uni-list >
                        <view v-for="checkRecord in checkRecords" :key="checkRecord.stationCode">
                            <uni-list-chat
                                           v-bind:title="checkRecord.stationCode + ' ' + checkRecord.stationName"
                                           v-bind:note="checkRecord.checkContent"
                                           v-bind:time="checkRecord.checkDate"
                                           clickable="true"
                                           @click="navigateToStationInfo(checkRecord.id)"
                                           v-bind:stationCode="checkRecord.stationCode"
                            ></uni-list-chat>
                        </view>
                    </uni-list>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "CheckRecordMain",
        data() {
            return {
                windowWidth: '375px',
                windowHeight: '667px',
                stationCode: '',
                searchWord: '',
                checkRecords:[
                    // {
                    //     id: '',
                    //     stationCode: '',
                    //     stationName: '',
                    //     checkDate: '',  // 2021-11-23 09:00:11
                    //     checkContent: '', // WSP3103
                    // }
                ]
            }
        },
        onLoad: function(options) {
            this.windowWidth = options.windowWidth
            this.windowHeight = options.windowHeight

            this.stationCode = options.stationCode

            this.fetchAllCheckRecords(this.stationCode)
        },

        methods: {
            searchCheckRecords() {
                this.fetchAllCheckRecords(this.stationCode, this.searchWord)
            },

            fetchAllCheckRecords(stationCode, searchWord) {
                uni.showLoading({
                    title: '巡检记录'
                })
                stationCode = stationCode === undefined ? '' : stationCode
                searchWord = searchWord === undefined ? '' : searchWord
                this.uniRequest({
                    url: '/stations/checkRecords',
                    data: {
                        stationCode: stationCode,
                        searchWord: searchWord
                    },
                    method: 'GET',
                }).then((res) => {
                    console.log('fetchAllCheckRecords Response: ', res)
                    this.checkRecords = res.data;
                    uni.hideLoading()
                }).catch((err) => {
                    console.log('fetchAllCheckRecords error: ', err)
                    uni.hideLoading()
                    uni.showToast({
                        icon: 'error',
                        title: '巡检记录获取失败！ ',
                        duration: 2000
                    })
                });
            },
            navigateToStationInfo(recordId) {
                uni.navigateTo({
                    url: '/pages/check/CheckRecordInfo?windowHeight=' + this.windowHeight + '&windowWidth=' + this.windowWidth + '&recordId=' + recordId
                })
            },
            navigateToAddCheckRecord(stationCode) {
                var that = this
                var url = function(stationCode) {
                    return stationCode === undefined || stationCode === '' ?
                        '/pages/check/CheckRecordUpdate?windowHeight=' + that.windowHeight + '&windowWidth=' + that.windowWidth + '&action=create' :
                        '/pages/check/CheckRecordUpdate?windowHeight=' + that.windowHeight + '&windowWidth=' + that.windowWidth + '&action=create&stationCode=' + stationCode
                }
                uni.navigateTo({
                    url: url(stationCode)
                })
            }
        }
    }
</script>

<style scoped>

</style>